<template>
    <div class="icon-box">
        <div class="icon-box-view">
            <van-icon name="music-o" size="0.5rem" />
            <div>每日推荐</div>
        </div>
        <div class="icon-box-view" >
            <van-icon name="tv-o"  size="0.5rem"/>
            <div>私人FM</div>
        </div>
        <div class="icon-box-view">
           <van-icon name="service" size="0.5rem" />
            <div>歌单</div>
        </div>
        <div class="icon-box-view">
            <van-icon name="bar-chart-o" size="0.5rem" />
            <div>排行榜</div>
        </div>
    </div>
</template>

<script lang="ts">import { defineComponent } from "vue";

export default defineComponent({
setup() {

return {
};
},
});
</script>

<style lang="less" scoped>
.icon-box{
    display: flex;
    flex-wrap: nowrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  .icon-box-view{
    text-align: center;
    div{
        margin: auto;
    }
  }
}
</style>